<template>
  <div id="continue">
    <div class="login-wrapper">
      <div class="img-wrapper">
        <img src="@/assets/images/login.jpg" alt="">
      </div>
      <div class="form-wrapper">
        <h2>账户注册</h2>
        <p>请输入用户信息注册聊天账号</p>
        <div class="input-wrapper">
          <input placeholder="用户手机号" v-model="registerInfo.username"/>
        </div>
        <div class="input-wrapper">
          <input type="password" placeholder="用户密码" v-model="registerInfo.password"/>
        </div>
        <button @click="register">立即注册</button>
        <p class="tip">
          已存在账户？<a href="/login">立即登录</a>
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {getCurrentInstance, reactive} from "vue";
import {registerService} from '@/server/userService';
import {ElLoading, ElMessage} from 'element-plus'
import {useRouter} from "vue-router";

const {appContext} = getCurrentInstance();
const route = useRouter();

//用户注册信息
let registerInfo = reactive({
  username: '',
  password: '',
})

function register() {
  //判断
  if (!registerInfo.username) {
    ElMessage({
      message: '用户名不能为空!',
      type: 'warning',
    }, appContext)
    return;
  }

  if (!registerInfo.password) {
    ElMessage({
      message: '用户密码不能为空!',
      type: 'warning',
    }, appContext)
    return;
  }

  const loadingInstance1 = ElLoading.service()
  registerService(registerInfo).then((res) => {
    loadingInstance1.close();
    let data = res.data;
    if (data.code) {
      ElMessage({
        message: data.msg,
        type: 'warning',
      }, appContext)
      return;
    }

    ElMessage({
      message: '注册成功，请登录！',
      type: 'success',
    }, appContext);
    setTimeout(() => {
      route.push({path: '/login'});
    }, 1500)
  })
}
</script>

<style scoped lang="scss">
@use "@/pages/login/login";
</style>